<template>
  <div class="complaint-list sub-margin">
    <div class="sub-page-title">企业名录</div>
    <div class="conditions">
      <el-row>
        <el-col :span="19">
          <el-input
            class="search-input"
            @keyup.enter.native="onSearch"
            size="large"
            style="margin-right: 10px"
            v-model.trim="filtersVal.enterpriseName"
            clearable
            placeholder="请输入企业名称关键字"
            @clear="onSearch"></el-input>

          <el-input
            class="search-input"
            @keyup.enter.native="onSearch"
            size="large"
            v-model.trim="filtersVal.registerNumber"
            clearable
            placeholder="注册号/统一社会信用代码"
            @clear="onSearch"></el-input>
          <div class="search-item ml20">
            <div class="label-name syht14">企业规模类型：</div>
            <el-radio-group v-model.trim="filtersVal.enterpriseType" @change="onEnterpriseType">
              <el-radio class="syht14" v-for="item in enterpriseTypes" :key="item.id" :label="item.id">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </div>
          <div class="search-btn ml20">
            <el-button class="export-btn" type="primary" size="small" @click="onSearch">搜索</el-button>
            <el-button class="export-btn" type="primary" plain size="small" @click="onReset">重置</el-button>
          </div>
        </el-col>
        <el-col :span="5" v-if="isOper" style="justify-content: flex-end">
          <el-button class="export-btn" type="primary" size="small" @click="onAddEdit">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="complaint-table">
      <div class="table-inner">
        <table-data :isOper="isOper" :tableData="tableData" @tableBtnClick="onTableBtnClick"></table-data>
      </div>
    </div>
    <div class="pag-box">
      <pagination
        :current-page.sync="pageIdx"
        :page-size.sync="pageSize"
        :total="totalSize"
        @currentChange="onPageChange"></pagination>
    </div>
  </div>
</template>

<script>
import { listEnterprisePages, deleteEnterprise } from '@api/modules/enterprise.js'
import pagination from '@com/pagination.vue'

import { mapActions, mapGetters } from 'vuex'
import TableData from './components/TableData.vue'

export default {
  name: 'ENTERPRISE_LIST',
  props: {
    // 是否可以操作
    isOper: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    pagination,
    TableData,
  },
  data() {
    return {
      addVisible: false,
      editItem: {},

      filtersVal: {
        enterpriseName: '',
        registerNumber: '',
        enterpriseType: '',
        dataType: '',
      },
      enterpriseTypes: [],
      pageIdx: 1,
      pageSize: 10,
      totalSize: 0,
      tableData: [],
    }
  },
  filters: {},
  computed: {
    ...mapGetters('publicCode', ['getCode']),
  },
  watch: {},
  created() {
    if (this.isOper) {
      this.filtersVal.dataType = '3'
    } else {
      this.filtersVal.dataType = '1'
    }
    this.getEnterpriseTypes()
    this.getPageData()
  },
  methods: {
    ...mapActions('publicCode', ['getListDictData']),
    async getEnterpriseTypes() {
      await this.getListDictData({ param: 'ENTERPRISE_TYPE' })

      const { ENTERPRISE_TYPE } = this.getCode

      this.enterpriseTypes = [...ENTERPRISE_TYPE]
    },
    resetPage() {
      this.pageIdx = 1
    },
    onPageChange() {
      this.getPageData()
    },
    refreshList() {
      this.resetPage()
      this.getPageData()
    },
    onEnterpriseType(data) {
      this.filtersVal.enterpriseType = data
      this.resetPage()
      this.getPageData()
    },
    onReset() {
      this.filtersVal.enterpriseName = ''
      this.filtersVal.registerNumber = ''
      this.filtersVal.enterpriseType = ''
      this.onSearch()
    },
    onSearch(data) {
      this.filtersVal = { ...this.filtersVal, ...data }
      console.log(this.filtersVal)
      this.resetPage()
      this.getPageData()
    },
    getPageData() {
      listEnterprisePages({ ...this.filtersVal, current: this.pageIdx, size: this.pageSize }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    deleteRow({ id }, idx) {
      this.$confirm('确定要删除该企业?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteEnterprise(id).then(res => {
            if (res.code === 0) {
              this.$message.success('删除成功！')
              this.tableData.splice(idx, 1)
            }
          })
        })
        .catch(() => {})
    },

    // 添加、编辑
    onAddEdit(data) {
      this.editItem = { ...data }
      this.$router.push({
        name: 'enterpriseCreate',
        params: { id: data.id },
      })
    },
    // 查看
    onView(data) {
      this.editItem = { ...data }
      this.$router.push({
        name: 'enterpriseDetails',
        params: { id: data.id },
      })
    },
    // 添加成功
    onAdded() {
      this.refreshList()
    },
    // 编辑成功
    onUpdated() {
      this.getPageData()
    },
    onTableBtnClick(data) {
      const { eventName } = data
      if (eventName === 'view') {
        this.onView(data)
      } else if (eventName === 'addEdit') {
        this.onAddEdit(data)
      } else if (eventName === 'delete') {
        this.deleteRow(data)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.complaint-list {
  height: 100%;
  overflow: hidden;
  @include flex-y;
  .conditions {
    margin: 12px 0;
    .page-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .search-input {
      // margin-left: 20px;
      width: 260px;
    }

    .search-item {
      @include flex-x(center);
      .label-name {
        font-size: 14px;
        color: #606266;
        margin-right: 10px;
      }
    }
    .label {
      font-size: 16px;
      min-width: 80px;
      color: #666;
      margin-left: 5px;
    }

    ::v-deep .el-col {
      display: flex;
      align-items: center;
    }
    ::v-deep .el-range-separator {
      width: auto;
    }

    //.export-btn {
    // font-size: 16px;
    //}
  }
  .complaint-table {
    @include flex-1;
    position: relative;
    .table-inner {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      font-size: 16px;
    }
  }
  .pag-box {
    padding: 0 4px;
    margin: 10px 0;
  }
}
</style>
